<template>
	<view class="container">
		<view class="item01">账户可用金币
			<text class="item01_num">{{ userinfo.score }}</text>
			个
		</view>
		<view class="item02">充值购买金币<input class="item02_num" type="number" v-model="buyJinbiCount"></view>

		<view class="item03">

			<view class="jinbi" v-for="(item,index) in jinbiArr" :key="item.id" @click="clickActive(item)"
				:class="activeClass == item.id ? 'active' : ''">
				<view class="jinbi_num">{{ item.jinbi }}金币</view>
				<view class="jibi_desc">{{ item.desc }}元</view>
			</view>

		</view>

		<view class="item04" @click="pay">充值并购买</view>
		<view class="item05">
			<view class="item05_b1">温馨提示</view>
			<view class="item05_b2">
				1、1元=1金币，金币可用于平台内发布信息 <br>
				2、信息发布时，发布手机号需支付2金币/条信息 <br>
				3、充值后不可退款，充值直接购买金币 <br>
				4、点击充值，代表您已同意<text @click="toMianze">《免责声明》</text> <br>
				5、充值购买的金币使用时间期限为2年 <br>
				6、您当前充值账户的昵称：<text style="color:red">{{userinfo.nickname}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				buyJinbiCount: 0, // 充值金币
				activeClass: 0, // 点击激活按钮
				jinbiArr: [{ // 金币显示组
					'id': 1,
					'jinbi': 10,
					'desc': 10
				}, {
					'id': 2,
					'jinbi': 30,
					'desc': 30
				}, {
					'id': 3,
					'jinbi': 50,
					'desc': 50
				}, {
					'id': 4,
					'jinbi': 100,
					'desc': 100
				}, {
					'id': 5,
					'jinbi': 500,
					'desc': 500
				}, {
					'id': 6,
					'jinbi': 1000,
					'desc': 1000
				}, ],
				currentJinbi: 0,
				currentDesc: 0
			}
		},
		computed: {
			...mapState(['userinfo']),
		},
		onLoad(query) {
			if(query.success == 1){
				uni.showModal({
				    content: '请选择支付结果？',
					cancelText: '取消充值',
					confirmText: '充值成功',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		},
		onShow() {
			// 微信分享
			this.shareWx('', '在线充值')
			
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showModal({
					content: '请先微信登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login?reffer=' + window.location.href
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tabbar/index/index'
							})
						}
					}
				});

				return
			}
			
			this.getUserById();
		},
		methods: {
			toMianze(){
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/fuwu/fuwu'
				})
			},
			clickActive(jinbiArrItem) {
				this.activeClass = jinbiArrItem.id
				this.buyJinbiCount = jinbiArrItem.jinbi
				
				this.currentJinbi = jinbiArrItem.jinbi
				this.currentDesc = jinbiArrItem.desc
			},
			// 根据id刷新用户
			getUserById() {
				this.$api.get_user_by_id({
					'id': this.userinfo.id
				}).then(res => {
					if (res.code == 1) {
						this.user = res.data
						// 把登录信息赋值给 vuex 中的 userinfo
						this.$store.dispatch('set_userinfo', res.data)
					}
				})
			},
			// 金币充值下单
			pay() {
				// 充值金币必须大于0
				if(this.buyJinbiCount < 1){
					uni.showToast({
						title: '请选择充值金币',
						icon: 'none',
						mask: true,
					})
					return false;
				}

				console.log(this.currentJinbi, this.currentDesc)
				this.$api.payOrder({
					'id': this.userinfo.id,
					'order_price': this.currentDesc,
					'discount_price': 0,
					'jinbi': this.currentJinbi,
				}).then(res => {
					if (res.code == 1) {
						const wxuser_id = res.data.wxuser_id
						const method = 'web';
						const trade_no = res.data.trade_no
						const actual_pay_price = res.data.actual_pay_price
						const openid = this.userinfo.openid
						const jinbi = res.data.jinbi
						const title = '金币充值'
						const payflag = 'jbzc'

						window.location.href = this.apiHost + "/api.php/wxpay/pay?amount=" + actual_pay_price +
							"&jinbi=" + jinbi + "&type=wechat&method=" + method + '&openid=' + openid +
							'&out_trade_no=' + trade_no + '&title=' + title + '&payflag=' + payflag;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true,
						})
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 10px;

		.item01 {
			margin-bottom: 6px;

			.item01_num {
				color: red;
				margin: 0 6px;
			}
		}

		.item02 {
			margin-bottom: 6px;
			display: flex;
			align-items: center;

			.item02_num {
				display: inline-block;
				width: 80px;
				border-bottom: 1px solid #000;
				text-align: center;
			}
		}

		.item03 {
			margin-top: 16px;
			margin-bottom: 6px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.jinbi {
				width: 30%;
				text-align: center;
				border: 1px solid #000;
				margin-bottom: 14px;
				padding: 6px 0;
				border-radius: 5px;

				.jinbi_num {
					font-size: 18px;
				}
			}

			.active {
				border: 1px solid rgb(240, 115, 115);
				background: rgb(240, 115, 115);
				color: #fff;
			}

		}

		.item04 {
			width: 300upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border-radius: 40upx;
			background: #f07373;
			color: #fff;
			margin-bottom: 20px;
		}

		.item05 {
			line-height: 56upx;

			.item05_b1 {
				font-size: 18px;
				margin-bottom: 10px;
			}

		}

	}
</style>
